{% extends 'common/layout.html' %}

{% block content %}

    <!-- 商品展示 -->
    <div style="text-align: center;background-color: #F3F4F6;border-radius: 10px ;width: 80%;margin: 0 auto;">
        <h1 style="margin: 10px; padding-left: 20px; padding-top: 10px; text-align: left; border-bottom: 2px solid #E91E63;">
            商品列表
        </h1>
        <!-- 使用 CSS Grid 布局 -->
        <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 20px; border-radius: 10px;">

            {% for item in search_data %}
                <a href="{% url 'content:商品详情' %}?id={{ item.id }}" style="text-decoration: none; color: inherit;">

                    <div style="padding: 10px; background-color: white; border-radius: 10px;">
                        <img src="{{ item.images.url }}" width="150px" height="150px">
                        <h1 style="text-align: center; font-size: 18px;">{{ item.name }}</h1>
                        <h2 style="text-align: center; font-size: 18px; color: #EC4899FF">￥{{ item.price }}</h2>
                        <button id="search_button" class="layui-btn layui-bg-blue" style="width: 100%;">查看详情
                        </button>
                    </div>
                </a>

            {% endfor %}
        </div>


    </div>


{% endblock %}
